<template>
	<view class="content">
		<!-- 顶部导航 -->
		<u-navbar :is-back="false" :background="backgroundColor" is-fixed>
			<view class="slot-wrap">
				<view class="img_usier" @click="toUser">
					<u-image class="img" width="50rpx" height="50rpx" src="./../../static/img/user.jpg"></u-image>
				</view>
				<view class="img_title">
					<view>
					</view>
				</view>
			</view>
			<!-- 最右边 -->
			<view class="navbar-right" slot="right">
				<u-image @click="serchUser" class="img" width="50rpx" height="50rpx" src="./../../static/img/serch.png"></u-image>
				<u-image class="img" width="50rpx" height="50rpx" src="./../../static/img/anduser.png"></u-image>
			</view>
		</u-navbar>
		<!-- 列表页面 -->
		<!-- <u-badge type="error" count="7"></u-badge> -->

		<view class="friend_list">
			<!-- 有数据的时候 -->
			<view class="friend">
				<view class="friend_item">
					<view class="mes">
						<u-badge type="error" :offset="[-10, -5]" count="7"></u-badge>
						<image class="first_img" src="../../static/img/userAdd.png"></image>
					</view>

					<view class="righ_view">
						<view class="righ_view_top">
							<text class="top_title">好友请求</text>
							<text class="time">上午7:45</text>
						</view>
						<view class="righ_view_btm">
							我是介绍内容
						</view>
					</view>

				</view>



				<view class="friend_item">
					<view class="mes">
						<u-badge type="error" :offset="[-10, -5]" count="1"></u-badge>
						<image src="../../static/img/logo1.png"></image>
					</view>

					<view class="righ_view">
						<view class="righ_view_top">
							<text class="top_title">好友请求</text>
							<text class="time">上午7:45</text>
						</view>
						<view class="righ_view_btm">
							我是介绍内容
						</view>
					</view>

				</view>



				<view class="friend_item">
					<view class="mes">
						<u-badge type="error" :offset="[-10, -5]" count="1"></u-badge>
						<image src="../../static/img/logo1.png"></image>
					</view>

					<view class="righ_view">
						<view class="righ_view_top">
							<text class="top_title">好友请求</text>
							<text class="time">上午7:45</text>
						</view>
						<view class="righ_view_btm">
							我是介绍内容
						</view>
					</view>

				</view>




				<view class="friend_item">
					<view class="mes">
						<u-badge type="error" :offset="[-10, -5]" count="1"></u-badge>
						<image src="../../static/img/logo1.png"></image>
					</view>

					<view class="righ_view">
						<view class="righ_view_top">
							<text class="top_title">好友请求</text>
							<text class="time">上午7:45</text>
						</view>
						<view class="righ_view_btm">
							我是介绍内容
						</view>
					</view>

				</view>





			</view>






			<!-- 没数据的时候 -->
			<view class="no_friend" v-if="isFriend">
				<view class="img_bg">
					<!-- <image  src="../../static/img/logo1.png" mode=""></image> -->
				</view>
				<view class="title_default">
					一个好友都没有,快去添加好友吧
				</view>
				<u-button class="title_button" type="primary" shape="circle">添加好友</u-button>
			</view>


		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				title: "Hello",
				isFriend: false, //是否有好友
				backgroundColor: {
					background: "#ffffff"
				}
			};
		},
		onLoad() {},
		methods: {
			toUser() {
				this.$u.route({
					url: 'pages/details/details'
				})

				// this.$route.push({
				// 	path:'/details'
				// })
			},
			// 搜索用户
			serchUser() {
				this.$u.route({
					url: 'pages/searchUser/searchUser'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.content {
		.slot-wrap {
			display: flex;
			width: 100%;

			// height: 100rpx;
			// background-color: red;
			.img_usier {
				flex: 2;
				// margin-left: 30rpx;
				// background-color: red;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.img_title {
				flex: 7;
				display: flex;
				align-items: center;
				justify-content: center;

				// background-color: green;
				view {
					width: 60rpx;
					height: 30rpx;
					background-image: url("./../../static/img/logo.png");
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				// background-color: red;
				// background-color: royalblue;
			}

			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
		}

		.navbar-right {
			display: flex;
			align-items: center;

			.img {
				margin: 0 30rpx;
			}
		}


	}

	// 用户列表
	.friend_list {
		.friend {
			width: 100%;
			border-right-color: red;

			.friend_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// padding: 30rpx 0  40rpx 0;
				margin-top: 30rpx;

				.mes {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					// border-right-color: red;
					// background-color: red;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						// padding: 10rpx;
						width: 80%;
						height: 80%;
						border-radius: 20rpx;
						// width: 86rpx;
						// height: 86rpx;
						// background-color: green;
					}

					.first_img {
						background-color: #FFE431;
					}

				}



				.righ_view {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					.righ_view_top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.top_title {
							color: #272832;
							font-family: PingFangSC-Regular;
							font-size: 15px;
							font-weight: 600;
						}

						.time {
							margin-right: 60rpx;
							color: rgba(39, 40, 50, 0.40);
							font-size: 12px;
							font-family: PingFangSC-Regular;

						}
					}

					.righ_view_btm {
						padding: 6rpx 0;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: rgba(39, 40, 50, 0.60);
					}



				}

			}
		}





		// 当么用户的时候
		.no_friend {
			width: 100%;
			height: 400px;
			// background-color: red;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 100rpx 0;

			.img_bg {
				// width: 200px;
				// height: 200px;
				// background-color: green;
				width: 300rpx;
				height: 300rpx;
				background-image: url("./../../static/img/logo1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.title_default {
				margin-top: 60rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #7E7F85;

			}

			.title_button {
				margin-top: 60rpx;
			}


		}




	}
</style>
